{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="{% static 'web/css/bootstrap.min.css' %}">
    <link rel="stylesheet" href="{% static 'web/css/common.css' %}">
    <style type="text/css">
        body {
            min-height: 2000px;
            padding-top: 70px;
        }

        .navbar-default {
            background-color: #ff8800;
            border-color: #e7e7e7;
        }

        .navbar-default .navbar-brand {
            color: #fff;
        }

        .navbar-default .navbar-nav > li > a, .navbar-default .navbar-nav > li > a:visited {
            color: #fff;
            width: 100px;
            font-size: 14px;
            text-align: center;
        }

        .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:visited, .navbar-default .navbar-nav li a:hover, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav li a:active {
            color: #fff;
            background-color: #FF4500;
            width: 100px;
            font-size: 14px;
            text-align: center;
        }

        table tr td {
            font-size: 11px;
        }

        table tr td.price {
            color: red;
        }

        table tr td.num span {
            color: red;
            padding: 0px 5px
        }

        table tr td.num i {
            border-width: 0px;
            background-color: #ddd;
        }

        div.shoplist div.bn {
            font-size: 12px;
            line-height: 25px;
        }

        div.shoplist div.bn span.price {
            color: red;
        }

        .container .panel .panel-heading {
            padding: 0px 15px;
            line-height: 40px;
        }

        .container .panel .panel-heading button.btn {
            margin-top: 5px;
            width: 100px;
            float: right
        }

        .pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus {
            z-index: 3;
            color: #fff;
            cursor: default;
            background-color: #ff8800;
            border-color: #ff8800;
        }
    </style>
</head>
<body>
<!-- 页头导航开始 -->
<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">
                <span class="glyphicon glyphicon-cutlery" aria-hidden="true"></span> <span style="font-weight:bold;">田老师红烧肉</span><span style="font-size:14px;">（朝阳将台路店）</span></a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li><a href="{% url 'web_index' %}">堂吃点餐</a></li>
                <li {% if request.GET.status == '1' %}class="active"{% endif %}><a href="{% url 'web_orders_index' 1 %}?status=1">当前订单</a></li>
                <li {% if request.GET.status == '3' %}class="active"{% endif %}><a href="{% url 'web_orders_index' 1 %}?status=3">历史订单</a></li>
                <li {% if request.GET.status == '2' %}class="active"{% endif %}><a href="{% url 'web_orders_index' 1 %}?status=2">无效订单</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="../navbar/">
                    <span class="glyphicon glyphicon-user" aria-hidden="true"></span>张无忌</a></li>
                <li><a href="../navbar-static-top/">退出</a></li>
            </ul>
        </div><!--/.nav-collapse -->
    </div>
</nav>
<!-- 页头导航结束 -->

<!-- 页面主体开始 -->
<div class="container">
    <div class="col-md-12">
        <div class="panel panel-danger">
            <div class="panel-heading">
                <span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span> 订 单 列 表
                <button type="button" class="btn btn-warning btn-sm">刷 &nbsp; 新</button>
            </div>
            <table class="table table-striped">
                <tr>
                    <th style="width:60px">订单号</th>
                    <th>会员</th>
                    <th>操作员</th>
                    <th>金额</th>
                    <th>付款方式</th>
                    <th>支付状态</th>
                    <th>订单状态</th>
                    <th>下单时间</th>
                    <th>操作</th>
                </tr>
                {% for foo in orderslist %}
                    <tr class="oid{{ foo.id }}">
                        <td>{{ foo.id }}</td>
                        {#                        <td>{{ foo.member_id }}</td>#}
                        <td>{{ foo.member_name }}</td>
                        <td>{{ foo.nickname }}</td>
                        <td class="price">{{ foo.money }}</td>
                        <td>微信</td>
                        <td>
                            {% if foo.status == 1 %}
                                <span style="color: green">制作中</span>
                            {% elif foo.status == 2 %}
                                <span style="color: red">无效</span>
                            {% elif foo.status == 3 %}
                                <span style="color: red">已完成</span>
                            {% else %}
                                <span style="color: red">未知状态</span>
                            {% endif %}
                        </td>
                        <td>
                            {% if foo.payment_status == 1 %}
                                <span style="color: red">未支付</span>
                            {% elif foo.payment_status == 2 %}
                                <span style="color: green">已支付</span>
                            {% elif foo.payment_status == 3 %}
                                <span style="color: pink">已退款</span>
                            {% else %}
                                <span style="color: red">未知状态</span>
                            {% endif %}
                        </td>
                        <td>{{ foo.create_at|date:'Y-m-d H:i:s' }}</td>
                        <td>
                            {#                            <button type="button" onclick="$('#myModal').modal({keyboard:false})" class="btn btn-warning btn-xs" role="button"><span#}
                            <button type="button" onclick="doShow({{ foo.id }})" class="btn btn-warning btn-xs" role="button">
                                <span class="glyphicon glyphicon-search" aria-hidden="true"></span> 详情
                            </button>
                            {% if sta == '1' %}
                                <button type="button" onclick="doChangeStatus({{ foo.id }},3)" class="btn btn-info btn-xs" role="button"><span
                                        class="glyphicon glyphicon-ok" aria-hidden="true"></span>完成
                                </button>
                                <button type="button" onclick="doChangeStatus({{ foo.id }},3)" class="btn btn-danger btn-xs" role="button"><span
                                        class="glyphicon glyphicon-trash" aria-hidden="true"></span>删除
                                </button>
                            {% endif %}
                        </td>
                    </tr>
                {% endfor %}

            </table>
            <div class="panel-footer" style="height:50px">
                {% if sta == '1' %}
                    <div style="width:120px;float:left;margin:5px 0px;">合计订单：<span style="color:red;font-weight:bold;">{{ sum.0 }}</span> 个</div>
                {% elif sta == '2' %}
                    <div style="width:120px;float:left;margin:5px 0px;">合计订单：<span style="color:red;font-weight:bold;">{{ sum.1 }}</span> 个</div>
                {% elif sta == '3' %}
                    <div style="width:120px;float:left;margin:5px 0px;">合计订单：<span style="color:red;font-weight:bold;">{{ sum.2 }}</span> 个</div>
                {% endif %}
                <nav aria-label="Page navigation" class="text-right">
                    <ul class="pagination" style="margin:0px;">
                        <li><a href="{% url 'web_orders_index' pIndex|add:-1 %}?{{ mywhere|join:'&' }}">&laquo;</a></li>
                        {% for foo in plist %}
                            <li {% if foo == pIndex %}
                                class="active"
                            {% endif %} >
                                <a href="{% url 'web_orders_index' foo %}?{{ mywhere|join:'&' }}">{{ foo }}</a>
                            </li>
                        {% endfor %}
                        <li><a href=" {% url 'web_orders_index' pIndex|add:1 %}?{{ mywhere|join:'&' }}">&raquo;</a></li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>
</div>
<!-- 页面主体结束 -->

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">订单详情</h4>
            </div>
            <div class="modal-body">
                数据加载进来的
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                {#                <button type="button" class="btn btn-primary">保存</button>#}
            </div>
        </div>
    </div>
</div>

<script src="{% static 'web/js/jquery.min.js' %}"></script>
<script src="{% static 'web/js/bootstrap.min.js' %}"></script>
<script type="text/javascript">
    function doShow(id) {
        $('#myModal').modal({keyboard: false})
        $.ajax({
            type: 'GET',
            url: '{% url "web_orders_detail" %}',
            dataType: 'text',
            data: {oid: id},
            async: false,
            success: function (res) {
                console.log(res)
                $('#myModal div.modal-body').empty().append(res);
                $('#myModal').modal({keyboard: false})
            }
        })
    }

    function doChangeStatus(id, s) {
        let info = ["", "", "确认要删除订单吗？", "确认要完成此订单吗？"]
        if (window.confirm(info[s])) {
            $.get('{% url "web_orders_status" %}', {oid: id, status: s}, function (data) {
                if (data === 'Y') {
                    $('tr.oid' + id).remove();
                } else {
                    alert('订单处理失败！')
                }
            }, 'text');
        }
    }
</script>
</body>
</html>